<template>
	<div class="header2" >
		<div class="nav-return-button"  v-on:click.stop="back" > 
			<img  v-bind:src="src" /><span>&nbsp;Return</span>
	             </div>
		<div class="nav-title-block" > {{ title }} </div>
		<div class="nav-return-button nav-block">&lt; Return</div>
	</div>
</template>

<script>
export default {
	props : ['title'],
	data() {
		return { 
			src : "./frontend-plan/vue/dist/img/return.png"
		}
	},
	methods : {
		back () {
			window.history.go(-1);
		}
	}
}
</script>

<style> 
.header2 {
	height: 40px;
	padding:0px 10px;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: center;
	background-color : #fff;
}

.nav-return-button{
	display: flex;
	align-items: center;
	font-size: 14px;
	color: gray;
}
.nav-return-button img{
	width: 20px;	
}

.nav-block{
	visibility: hidden;
} 
</style>